import React from 'react'
import {
    StyleSheet,
    View,
    Text,
    TouchableWithoutFeedback
} from 'react-native'

export default class CommunityTabCell extends React.PureComponent {

    render() {
        this.isHighlight = this.props.highlightTitle == this.props.title
        this.color = this.isHighlight ? 'rgba(184, 136, 100, 1)' : '#333333'
        this.isShow = this.isHighlight ? true : false
        this.fontSize = this.isHighlight ? 17 : 15

        const { style } = this.props
        return (
            <TouchableWithoutFeedback onPress={this.clickCellAction}>
                <View style={[styles.container, style]}>
                    <View style={styles.content} >
                        <Text style={[styles.text, { color: this.color, fontSize:this.fontSize }]} onLayout={this.onLayout}>{this.props.title}</Text>
                    </View>
                    <View style={[styles.line, {width:this.fontSize*this.props.title.length, height:this.isShow ? 3 : 0}]} />
                </View>
            </TouchableWithoutFeedback>
        )
    }

    clickCellAction = () => {
        this.props.action(this.props.title)
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        alignItems: 'center',
        // height:50,
    },
    content:{
        padding: 10,
        height:40,
        alignItems: 'center',
        justifyContent:'center',
        alignSelf:'flex-start'
    },

    line: {
        marginBottom: 0,
        backgroundColor: 'rgba(184, 136, 100, 1)'
    }
})